<template>
  <div class="index-container nav-bottom">
    <van-pull-refresh v-model="pullRefreshLoading" @refresh="pullRefresh" success-text="刷新成功">
      <div class="index-top" :style="{background: bgColor}">
        <!-- 搜索 -->
        <van-search :style="{background: bgColor}" @focus="search" placeholder="请输入搜索关键词" />
        <!-- 轮播图 -->
        <van-swipe @change="adChange" :autoplay="3000" indicator-color="white" class="ad-swipe">
          <van-swipe-item v-for="(ad, index) in adList" :key="index">
            <van-image :src="ad.url" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 导航菜单 -->
      <van-grid square :border="false" class="home-menu">
        <van-grid-item @click="$router.push(menu.path)" v-for="(menu, index) in menuList" :icon='menu.icon' :text="menu.name" :key="index"/>
      </van-grid>
      <!-- 领券 -->
      <div class="coupon">
        <van-swipe class="coupon-list" :loop="false" :show-indicators="false" :width="340">
          <van-swipe-item v-for="(coupon, index) in couponList" :key="index">
            <couponItem></couponItem>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 推荐商品 -->
      <div class="recommend">
        <span class="text">为你推荐</span>
        <van-image fit="contain" src="imgs/index/recommend.png" />
      </div>
      <van-list
        v-model="listView.loading"
        :finished="listView.finished"
        finished-text="没有更多了"
        @load="loadGoodsList">
        <van-grid :column-num="2" class="goods-box" :border="false">
          <van-grid-item class="goods" v-for="(goods, index) in listView.list" :key="index">
            <div slot="default">
              <goodsItem :detail="goods"></goodsItem>
            </div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </van-pull-refresh>
    <!-- 回到顶部 -->
    <vueToTop bottom="80" type="3" size="30"></vueToTop>
  </div>
</template>

<script>
import goodsItem from '@/components/goods/goodsItem'
import couponItem from '@/components/coupon/couponItem'

import goodsApi from '@/api/goodsApi'
import userApi from '@/api/userApi'

import utils from '@/utils/utils'
import config from '@/config/config'
import constants from '@/config/constants'

export default {
  components: {
    goodsItem,
    couponItem
  },
  name: 'index',
  data () {
    return {
      /* 下拉刷新 */
      pullRefreshLoading: false,
      /* 背景颜色 */
      bgColor: '#fff',
      /* 广告轮播图 */
      adList: config.adList,
      /* 导航菜单 */
      menuList: config.menuList,
      /* 推荐商品 */
      listView: {
        params: {
          pageNo: 1,
          pageSize: 10
        },
        loading: false,
        finished: false,
        list: [],
      },
      /* 优惠券列表 */
      couponList: [{},{},{}]
    }
  },
  created () {
    /* 设置背景色 */
    this.adChange(0);
    /* 更新购物车 */
    this.$store.commit(constants.STORE.UPDATE_CART_LIST);
  },
  methods: {
    /* 获取推荐商品列表 */
    loadGoodsList() {
      goodsApi.goodsList(this.listView.params).then(result => {
        if(result.code == constants.SUCCESS){
          utils.pageResultHandle(this.listView, result.data);
        }
      })
    },
    /* 广告轮播图切换事件 */
    adChange(index) {
      // this.bgColor = this.adList[index].color;
    },
    /* 下拉刷新 */
    pullRefresh () {
      this.refreshIndex();
    },
    /* 刷新首页内容 */
    refreshIndex () {
      setTimeout(() => {
        this.listView = {
          params: {
            pageNo: 1,
            pageSize: 10
          },
          loading: false,
          finished: false,
          list: [],
        };
        this.loadGoodsList();
        this.pullRefreshLoading = false;
      }, 1000);
    },
    /* 前往搜索 */
    search () {
      this.$router.push('/search');
      this.$store.commit(constants.STORE.UPDATE_SEARCH_KEYWORD, '');
    }
  }
}
</script>

<style lang="scss">
.home-menu{
  padding: 10px 0px;
  background: #fff;
  /deep/ .van-grid-item__icon{
    font-size: 40px;
  }
}
.ad-swipe{
  margin: 0 auto;
  border-radius: 5px;
  width: calc(100% - (11px) * 2);
  /deep/ .van-swipe-item{
    height: 175px;
    .van-image{
      height: 175px;
    }
  }
}
.coupon{
  background: #fff;
  padding: 0 10px;
}
.recommend{
  margin-top: 10px;
  height: 49px;
  position: relative;
  .text{
    position: absolute;
    top: 43%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-weight: 700;
    font-size: 14px;
  }
}
.goods-box{
  padding: 0 5px;
  .goods{
    margin-bottom: 10px;
    .van-grid-item__content--center{
      padding: 0px;
      margin: 5px 5px;
      border-radius: 5px;
    }
  }
}
</style>
